import { useState } from 'react';
import {
    Routes,
    Route,
    Link
} from 'react-router-dom';
import '../../scss/dynamic.scss';
import Recommendation from './Recommendation';
import FriendCreate from './FriendCreate';
import FriendShow from './FriendShow';
import React from 'react';
import NavTop from '../../componen/NavTop';

function Dynamic() {
    const [flag,setFlag] = useState('Rrecommendation');
    return (
        <nav className="navBox">
            <div className="mNav">
                <div className="newnav">< NavTop /></div></div>
            <div className="dNav">
                <ul className='category-list'>
                    <li onClick={(e:any)=>{setFlag(e.target.className)}}><Link to={{ pathname: '/Dynamic/' }} className='Rrecommendation' style={{color:(flag === 'Rrecommendation'?'white':'#A2A2A2'),fontSize:'20px'}}>动态推荐</Link></li>
                    <li onClick={(e:any)=>{setFlag(e.target.className)}}><Link to={{ pathname: '/Dynamic/FriendCreate' }} className='FriendCreate' style={{color:(flag === 'FriendCreate'?'white':'#A2A2A2'),fontSize:'20px'}}>好友原创</Link></li>
                    <li onClick={(e:any)=>{setFlag(e.target.className)}}><Link to={{ pathname: '/Dynamic/FriendShow' }}  className='FriendShow' style={{color:(flag === 'FriendShow'?'white':'#A2A2A2'),fontSize:'20px'}}>好友动态</Link></li>
                </ul>
                <div>
                    <Routes>
                        <Route path='/FriendCreate' element={<FriendCreate />} />
                        <Route path='/FriendShow' element={<FriendShow />} />
                        <Route path='/' element={<Recommendation />} />
                    </Routes>
                </div>
            </div>
        </nav>
    )
}
export default Dynamic;